<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考研数据可视化分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .card-shadow {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            }

            .hover-scale {
                transition: transform 0.3s ease;
            }

            .hover-scale:hover {
                transform: scale(1.02);
            }

            .chart-container {
                height: 400px;
                width: 100%;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 导航栏 -->
<nav class="fixed w-full bg-white shadow-md z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-graduation-cap text-primary text-2xl"></i>
            <h1 class="text-xl font-bold">考研数据可视化分析</h1>
        </div>
        <div class="hidden md:flex items-center space-x-6">
            <a href="index.jsp" class="text-dark hover:text-primary transition-colors">首页</a>
            <%--            <a href="charts.jsp.bak" class="text-dark hover:text-primary transition-colors">数据图表</a>--%>
            <a href="jsp/charts.jsp" class="text-dark hover:text-primary transition-colors">数据图表</a>
            <a href="#" class="text-dark hover:text-primary transition-colors">数据分析</a>
            <a href="#" class="text-dark hover:text-primary transition-colors">关于系统</a>
        </div>
        <div class="md:hidden">
            <button class="text-dark hover:text-primary">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </div>
</nav>

<!-- 英雄区域 -->
<header class="pt-24 pb-16 bg-gradient-to-r from-primary to-blue-700 text-white">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4">考研数据可视化分析平台</h1>
            <p class="text-lg md:text-xl mb-8 opacity-90">
                基于历年考研分数线、调剂信息和报考数据的深度分析，助力考研决策
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="jsp/charts.jsp.bak"
                   class="bg-white text-primary px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                    查看数据图表
                </a>
                <a href="#"
                   class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white/10 transition-colors">
                    了解数据分析
                </a>
            </div>
        </div>
    </div>
</header>

<!-- 筛选器 -->
<section class="py-8 bg-white shadow-md">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">年份范围</label>
                <select id="yearRange"
                        class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                    <option value="2018-2023">2018-2023</option>
                    <option value="2019-2024">2019-2024</option>
                    <option value="2020-2025">2020-2025</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">学科门类</label>
                <select id="subjectCategory"
                        class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                    <option value="all">全部学科</option>
                    <option value="engineering">工学</option>
                    <option value="management">管理学</option>
                    <option value="medicine">医学</option>
                    <option value="science">理学</option>
                    <option value="law">法学</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">数据类型</label>
                <select id="dataType"
                        class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
                    <option value="all">全部数据</option>
                    <option value="adjustment">调剂数据</option>
                    <option value="score">分数线数据</option>
                    <option value="applicant">报考数据</option>
                </select>
            </div>
            <div class="mb-4 flex items-end">
                <button id="filterBtn"
                        class="w-full bg-primary text-white py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                    <i class="fa fa-filter mr-2"></i> 筛选数据
                </button>
            </div>
        </div>
    </div>
</section>

<!-- 数据概览卡片 -->
<section class="py-12 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
            <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">院校总数</h3>
                    <i class="fa fa-university text-primary text-2xl"></i>
                </div>
                <div class="text-3xl font-bold mb-2">328</div>
                <div class="text-sm text-gray-500">覆盖全国重点院校</div>
            </div>
            <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">历年数据</h3>
                    <i class="fa fa-calendar text-secondary text-2xl"></i>
                </div>
                <div class="text-3xl font-bold mb-2">6年</div>
                <div class="text-sm text-gray-500">2018-2023年完整数据</div>
            </div>
            <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">调剂信息</h3>
                    <i class="fa fa-exchange text-success text-2xl"></i>
                </div>
                <div class="text-3xl font-bold mb-2">15,842</div>
                <div class="text-sm text-gray-500">条调剂记录</div>
            </div>
            <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">数据更新</h3>
                    <i class="fa fa-refresh text-info text-2xl"></i>
                </div>
                <div class="text-3xl font-bold mb-2">实时</div>
                <div class="text-sm text-gray-500">每日自动更新</div>
            </div>
        </div>
    </div>
</section>

<!-- 引入图表页面 -->
<jsp:include page="jsp/charts.jsp"/>

<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                    <h3 class="text-xl font-bold">考研数据可视化分析</h3>
                </div>
                <p class="text-gray-400 mb-4">
                    助力考研学子科学备考，圆梦理想院校
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github"></i>
                    </a>
                </div>
            </div>
            <div>
                <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                <ul class="space-y-2">
                    <li><a href="index.jsp" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                    <%--                    <li><a href="charts.jsp.bak" class="text-gray-400 hover:text-white transition-colors">数据图表</a></li>--%>
                    <li><a href="jsp/charts.jsp" class="text-gray-400 hover:text-white transition-colors">数据图表</a>
                    </li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">数据分析</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于系统</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-lg font-semibold mb-4">数据来源</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">教育部官网</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">各高校研究生院</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">权威考研机构</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                <ul class="space-y-2">
                    <li class="flex items-center text-gray-400">
                        <i class="fa fa-envelope-o mr-2"></i> support@kaoyan-analysis.com
                    </li>
                    <li class="flex items-center text-gray-400">
                        <i class="fa fa-phone mr-2"></i> 400-123-4567
                    </li>
                    <li class="flex items-center text-gray-400">
                        <i class="fa fa-map-marker mr-2"></i> 北京市海淀区中关村大街1号
                    </li>
                </ul>
            </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            <p>© 2025 考研数据可视化分析系统 | 数据仅供参考，以官方发布为准</p>
        </div>
    </div>
</footer>

<!-- 返回顶部按钮 -->
<button id="backToTop"
        class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300">
    <i class="fa fa-arrow-up"></i>
</button>

<!-- 图表初始化脚本 -->
<script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function () {
        const navbar = document.getElementById('navbar');
        const backToTop = document.getElementById('backToTop');

        if (window.scrollY > 100) {
            navbar.classList.add('py-2');
            navbar.classList.remove('py-3');
            backToTop.classList.remove('opacity-0', 'invisible');
            backToTop.classList.add('opacity-100', 'visible');
        } else {
            navbar.classList.add('py-3');
            navbar.classList.remove('py-2');
            backToTop.classList.add('opacity-0', 'invisible');
            backToTop.classList.remove('opacity-100', 'visible');
        }
    });

    // 返回顶部按钮点击事件
    document.getElementById('backToTop').addEventListener('click', function () {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // 筛选按钮点击事件
    document.getElementById('filterBtn').addEventListener('click', function () {
        // 获取筛选条件
        const yearRange = document.getElementById('yearRange').value;
        const subjectCategory = document.getElementById('subjectCategory').value;
        const dataType = document.getElementById('dataType').value;

        // 发送AJAX请求到服务器处理筛选逻辑
        // 这里使用表单提交方式，实际项目中可以使用AJAX
        window.location.href = `charts.jsp?yearRange=${yearRange}&subjectCategory=${subjectCategory}&dataType=${dataType}`;
    });

    // 当页面加载完成后初始化图表
    document.addEventListener('DOMContentLoaded', function () {
        // 检查当前页面是否包含图表容器
        if (document.getElementById('schoolAdjustmentChart')) {
            initCharts();
        }
    });
</script>
</body>
</html>